<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Make widgets responsive"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Make widgets responsive
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-719898F8-82E6-4618-AA82-D82F07E3512F]--><body><div id="content"><div class="header"><h1>
Make widgets responsive
</h1><div id="breadcrumb"></div></div>
<p id="GUID-9002732F-2EDC-4C21-9AF5-AFC54FC9E4E5">The jimu.js file does not only support a responsive UI layout
but also provides functions for developers to develop responsive
widgets.</p>
<p id="GUID-6A918FB5-8EA6-406A-B88E-2702C393F468">There are two ways to achieve the responsive goal, CSS and
layout dijit. The CSS classes can be found in jimu.js/css/jimu.css.</p>

<p id="GUID-24E03269-F78F-4954-B107-6E74AA8C1845"><div class="block_table" id="TABLE_5724457BAEC14A83A4E39AF6B5A427DE" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tr purpose="thead"><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-195EF25D-97C6-4F1B-A305-3BEED15103E0">Name</p></th><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-964081B1-6CC3-4891-B514-BE54AC8DBF64">Description</p></th></tr><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-AE33D58B-96E9-4DE3-80DD-CCD29FB723BF"><span class="usertext">jimu-r-row</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-CCE0293E-B734-4E5D-BE24-092F0895E154">One row of the layout.
</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-030A4380-2D9E-46F1-BBD5-31E824552EE8"><span class="usertext">col-1-2</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-3B8AB5D3-76F7-49EE-BB4A-B26C5509E14B">The width is half of its parent.
</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-3A1027FB-FC58-4CD6-AD05-C5B18F4B7DC7"><span class="usertext">col-1-3</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-9DAFFF37-FE6A-435D-BE54-380D810161C2">The width is one third of its parent.
</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-FA4DE205-452C-4217-857C-76861F568535"><span class="usertext">col-2-3</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F6363135-0601-4822-B2C2-DAD5B114E557">The width is two thirds of its parent.
</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-FB5F0BE8-390A-4BC9-9A2C-7B6C97F03831"><span class="usertext">col-1-4</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-8C2392D6-4193-47C2-9DC4-013E1A8379C9">The width is one fourth of its parent.
</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-13212F2B-466C-4338-BA26-44B882BBD4EC"><span class="usertext">col-3-4</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-B13A7F3A-17E2-4AF3-927F-50D83FC64AE5">The width is three fourths of its parent.
</p></td></tr></tbody></table><span class="table_desc"></span></div></p><p id="GUID-47BD2505-C8B5-4BAC-B780-856037325DDF">The layout dijit can be found in jimu.js/dijit.
</p><p id="GUID-12EF22BE-535E-45BE-830E-65C8AAEC2B39"><div class="block_table" id="TABLE_77DE9ABEB8D74F1095FC8565A69FADE1" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tr purpose="thead"><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-81A5DFDA-C3A2-4680-AF2E-EFFACE7A02C2">Name</p></th><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-077002CA-E5A2-4230-A7C7-3ABEF0C7175B">Description</p></th></tr><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-6D4F2CFB-2A18-499C-AD12-76BEADE35F1F"><span class="usertext">TileLayoutContainer</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-630DAF9E-516D-4546-903A-8BA1A321F2A7">Layout dijit.
</p></td></tr></tbody></table><span class="table_desc"></span></div></p><p id="GUID-22FFD3CA-CE4E-4CCB-92CD-0C8EAFF6E2D7">If both of these cannot meet your requirements, follow the best practices for the responsive UI .
</p>

<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>